<template>
  <div>
    <el-form
      :model="examineForm"
      label-width="100px"
      :inline="true"
      label-position="right"
      class="demo-form-inline"
    >
      <el-form-item label="审批意见:" required style="width: 100%">
        <el-input
          v-model="examineForm.leaderReviewComments"
          :rows="3"
          type="textarea"
          placeholder="请输入"  maxlength="512" show-word-limit  clearable
        />
      </el-form-item>
      <el-form-item label="附件:" style="width: 100%">
<!--
        <el-upload
          ref="uploadRef"
          :limit="1"
          :headers="headers"
          action="/fastDfs/file/upload"
          :on-success="handleAttachment"
        >
          <el-button type="primary">点击上传</el-button>
        </el-upload>
        <a
          class="document-link"
          target="_blank"
          v-if="examineForm.leaderFilePath"
          :href="examineForm.leaderFilePath"
          >文件链接</a
        >
-->
        <el-upload
            ref="uploadRef"
            :limit="5"
            :headers="headers"
            action="/fastDfs/file/upload"
            :on-success="handleStandard"
            :on-preview="previewFile"
            :on-remove="removeRdForm"
            :on-exceed="handleExceed"
            :on-error="handleError"
            drag
        ><!--:on-success="handleAttachment"-->

          <i class="el-icon-upload"></i>
          <div class="el-upload__text">
            将文件拖到此处，或<em>点击上传</em>
          </div>
          <div class="el-upload__tip"></div>
        </el-upload>

      </el-form-item>
    </el-form>
  </div>
</template>

<script lang="ts">
import { ElMessage } from 'element-plus'
import { defineComponent, reactive } from 'vue'
import { useStore } from 'vuex'
import {type} from "@/utils/utils";

export default defineComponent({
  setup() {
    const store = useStore()
    //浅克隆审核表单数据
    const examineForm = store.state.projectCenter.examineForm
    const options = [
      {
        value: 'Option1',
        label: 'Option1',
      },
      {
        value: 'Option2',
        label: 'Option2',
      },
      {
        value: 'Option3',
        label: 'Option3',
      },
    ]
    const handleAttachment = (uploadFile) => {
      if (uploadFile.code == 200) {
        ElMessage({
          message: '上传成功',
          type: 'success',
        })
        examineForm.leaderFilePath = uploadFile.data.path
        console.log(examineForm.leaderFilePath, 'examineForm.leaderFilePath')
      } else {
        ElMessage({
          message: '上传失败',
          type: 'error',
        })
      }
    }

    // const getFileList = (key) => {
    //   if (type(examineForm.leaderFilePath[key])) {
    //     let fileList = JSON.parse(examineForm.leaderFilePath[key])
    //     return fileList
    //   } else {
    //     return ''
    //   }
    // }
    const previewFile = (file) => {
      console.log(file,'previewFile')
      window.open(file.response.data.path)
    }
    // examineForm.leaderFilePath = getFileList('leaderFilePath')

    const removeRdForm = (file, uploadFiles) => {
      handleRemove(file, uploadFiles, 'url')
    }
    const handleRemove = (file, uploadFiles, key) => {
      console.log(file, uploadFiles, key,examineForm.leaderFilePath[key], 'examineForm.leaderFilePath')
      examineForm.leaderFilePath[key] = uploadFiles.map((fileItem) => {
        return {
          name: fileItem.name,
          url: fileItem.url,
        }
      })
      examineForm.leaderFilePath[key] = JSON.stringify(examineForm.leaderFilePath[key])
    }
    const handleExceed = () => {
      ElMessage({
        message: '最多上传5个附件',
        type: 'wraning',
      })
    }
    const handleError = () => {
      ElMessage({
        message: '上传失败',
        type: 'error',
      })
    }
    let fileList = [] as any
    const handleStandard = (uploadFile) => {
      if (uploadFile.code == 200) {
        ElMessage({
          message: '上传成功',
          type: 'success',
        })
        console.log('上传成功uploadFile', uploadFile)
        let obj = {
          name: uploadFile.data.fileName,
          url: uploadFile.data.path,
        }
        fileList.push(obj)
        examineForm.leaderFilePath= JSON.stringify(fileList)
        console.log(examineForm.leaderFilePath, 'uploadFile.data.path')
      } else {
        ElMessage({
          message: '上传失败',
          type: 'error',
        })
      }
    }

    const cookie = () => localStorage.getItem('token')
    return {
      store,
      options,
      examineForm,
      headers: {
        Authorization: 'Bearer ' + cookie(),
      },
      handleAttachment,
      previewFile,
      handleExceed,
      handleError,
      removeRdForm,
      handleStandard,
    }
  },
  beforeUnmount(){
    console.log('beforeUnmount');
    for(let key in this.examineForm){
      this.examineForm[key] = ''
    }
  }
})
</script>
